<template>
  <div class="box">
    <TopSearch
      @searchHeader="searchHeader"
      @delsHeader="delsHeader"
      @addHeader="addHeader"
      @headerButtonDel="headerButtonDel"
      @headerButtonSearch="headerButtonSearch"
      @headerButtonSelect="headerButtonSelect"
      :control="control"
      :controlPosition="controlPosition"
      :positionName="positionName"
      :disabled="disabled"
      :delsable="delsable"
      :searchConfig="setFormConfig"
    />
    <ProTable
      class="protable"
      :data="tableData"
      :page="page"
      :column="column"
      :rowControl="rowControl"
      :elProps="elProps"
      :disabled="disabled"
      @row-control-click="onRowControlClick"
      @selection-change="onSelectionChange"
      @page-change="onPageChange"
      @pageRefresh="pageRefresh"
    >
      <template #default="{ row, propname }">
        <FouImage v-if="propname === 'image'" :src="row[propname]" />
      </template>
    </ProTable>

    <FouDialog
      :title="'添加/修改'"
      :width="'75%'"
      v-model:dialogValue="dialogValue"
    >
      <template #content>
        <div>
          <AddEdit ref="AddEditref" :echo="echo"></AddEdit>
        </div>
      </template>
      <template #footer>
        <div>
          <el-button @click="cancel">取消</el-button>
          <el-button
            type="primary"
            @click="confirm((dialogValue = false))"
            color="#081F42"
            >確定</el-button
          >
        </div>
      </template>
    </FouDialog>

    <FouDialog
      :title="'職位'"
      :width="'75%'"
      v-model:dialogValue="searchDiolog"
    >
      <template #content>
        <div>
          <searchDia @search-dialog="searchDialog"></searchDia>
        </div>
      </template>
      <template #footer>
        <div>
          <el-button @click="searchDiolog = false">取消</el-button>
        </div>
      </template>
    </FouDialog>
  </div>
</template>

<script setup>
import { nextTick, reactive, ref } from "vue";
import { elProps, tableData, options } from "./index.js";
import { setFormConfig, DialogConfig } from "./formConfig";
import AddEdit from "./AddEdit/index.vue";
import searchDia from "./searchDia/index.vue";

import { addeditConfig } from "./AddEdit/formConfig";
let echo = ref({})
const pageRefresh = () => {
  console.log("pageRefresh");
};
//搜索彈窗
const searchDiolog = ref(false);
const headerButtonSearch = () => {
  searchDiolog.value = true;
};

const searchDialog = (row, type) => {
  searchDiolog.value = false;
  console.log(row, type);
};

// 添加編輯彈窗
const AddEditref = ref('');
const confirm = () => {
  AddEditref.value.DialogCofirm();
};
const cancel = (formEl) => {
};

// 分页数据（不给就没有分页）
const page = reactive({
  current_page: 1, //当前页
  per_page: 10, //每页条数
  total: 100, //总条数
  page_size: [10, 20, 30], //可选分页条数
});
// 字段名对应表头
const column = {
  name: "職員登入名",
  ChineseName: "中文名",
  EnglishName: "英文名",
  email: "郵箱",
  phone: "手機號",
  birthday: "出生日期",
  identity: "身份証",
  marriage: "婚姻狀況",
  address: "地址",
  homePhone: "住宅電話",
  Post: "職位名稱",
  TeachingStatus: "授課狀態",
  status: "狀態",
  date: "創建時間",
};
// 表格顶部操作按钮
const control = ["search", "dels", "add"];
const controlPosition = ["position"];
const positionName = ref("");

// 未选中数据是 禁用项
const disabled = ["dels"];
const delsable = ref(true);

const headerButtonDel = () => {
  console.log("headerButtonDel");
};

const headerButtonSelect = () => {
  console.log("headerButtonSelect");
};
const searchHeader = (e) => {
  console.log(e, "e");
};
const delsHeader = () => {
  console.log("delsHeader");
};
const dialogValue = ref(false);
const addHeader = () => {
  dialogValue.value = true;
};

// 表格行内操作按钮
const rowControl = ["rowedit", "rowdel"];

/**表格行内操作
 * @row {object} 行内数据
 * @type {string} 点击按钮类型
 */
const onRowControlClick = async ({ scope: { row }, type }) => {
  console.log(row, type);
  const {ChineseName, EnglishName, Post, TeachingStatus, address, birthday, date, email, homePhone, identity, marriage, name, phone, status} = row
  if (type == "rowedit") {
    dialogValue.value = true;
    echo.value = {ChineseName, EnglishName, Post, TeachingStatus, address, birthday, date, email, homePhone, identity, marriage, name, phone, status} 
    // console.log(AddEditref.value.dialogForm.value,'123');
    console.log(AddEditref.value,'123');

    // addeditConfig.formItems.map(async (e) => {
    //   for (const key in row) {
    //     if (e.props.prop == key) {
    //       e.value = row[key];
    // await nextTick()
    //     }
    //     if (e.props.prop == "Affiliation") {
    //       e.value = "vdfbvgf";
    //     }
    //     if (e.props.prop == "optional") {
    //       e.value = ["Option5", "Option3", "Option1"];
    //     }
    //   }
    // });
    await nextTick()
    console.log(addeditConfig.formItems);
  }
};

/** 多选
 * @selected {Array} 被选中的行
 */
const onSelectionChange = (e) => {
  delsable.value = e.length === 0;
};
/**
 * @e {number} 分页操作后的值（当前页|改变后的每页条数）
 * @type {string} <current|size> 分页操作类型（当前页改变|每页条数改变）
 */
const onPageChange = ({ e, type }) => {
  console.log(e, type);
  if (type == "current") {
    page.current_page = e;
  }
  if (type == "size") {
    page.per_page = e;
  }
};
// 弹窗
const dialogVisible = ref(false);

const handleClose = (done) => {
  dialogVisible.value = false;
};
// const dialogForm = ref(null);
// const DialogCofirm = () => {
//   dialogForm.value.submit((e) => {
//     console.log(e);
//   });
// };
</script>

<style lang="less" scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.box {
  padding: 16px 33px;
}
</style>